<template>
  <div class="app-container">
    <el-card>
      <el-row :gutter="15">
        <el-col :span="4">
          <el-input
            v-model="listQuery.title"
            size="small"
            placeholder="请输入获奖名称"
            clearable
          />
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="listQuery.author_name"
            size="small"
            placeholder="请输入获奖者名称"
            clearable
          />
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="listQuery.student_faculty"
            placeholder="请选择学生所属学院"
            clearable
            filterable
            size="small"
          >
            <el-option
              v-for="item in facultyList"
              :key="item.faculty_code"
              :label="item.faculty_title"
              :value="item.faculty_code"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="listQuery.teacher_faculty"
            placeholder="请选择老师所属学院"
            clearable
            filterable
            size="small"
          >
            <el-option
              v-for="item in facultyList"
              :key="item.faculty_code"
              :label="item.faculty_title"
              :value="item.faculty_code"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="listQuery.first_check_status"
            size="small"
            placeholder="请选择学院审核状态"
            clearable
          >
            <el-option label="待审核" value="待审核"></el-option>
            <el-option label="通过" value="通过"></el-option>
            <el-option label="退回修改" value="退回修改"></el-option>
          </el-select>
        </el-col>

        <el-col :span="4">
          <el-select
            v-model="listQuery.second_check_status"
            size="small"
            placeholder="请选择学校审核状态"
            clearable
          >
            <el-option label="待审核" value="待审核"></el-option>
            <el-option label="通过" value="通过"></el-option>
            <el-option label="退回修改" value="退回修改"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top:10px;">
        <el-col :span="12" :offset="0">
            <el-button
              type="success"
              size="small"
              icon="el-icon-search"
              @click.native="handleFilter"
              >搜索</el-button
            >
            <el-button
              type="primary"
              size="small"
              icon="el-icon-refresh"
              @click.native="resetFilter"
              >重置</el-button
            >
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top:10px;">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click.native="showCreateDialog"
        >新增</el-button
      >

      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        :header-cell-style="{ background: '#f5f7fa' }"
        max-height="650"
        style="width: 100%;margin-top:10px;"
      >
        <el-table-column fixed label="奖励名称" align="center" min-width="250">
          <template slot-scope="{ row }">
            <span class="link-type" @click="toDetail(row.id)">{{
              row.title
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="完成单位" align="center" prop="complete_unit" />
        <!-- <el-table-column label="获奖完成人" align="center" prop="all_authors" /> -->
        <el-table-column label="获奖日期" align="center" prop="prize_date" />
        <el-table-column
          label="获奖类别"
          align="center"
          prop="prize_category_name"
        />
        <el-table-column
          label="获奖级别"
          align="center"
          prop="prize_level_name"
        />
        <el-table-column
          label="获奖等级"
          align="center"
          prop="prize_rank_name"
        />
        <el-table-column label="成果名称" align="center" prop="results_name" />
        <el-table-column
          label="发证机关"
          align="center"
          prop="licence_issuing_authority"
        />
        <!-- 不知道为啥报错 -->
        <el-table-column
          label="一级审核意见"
          align="center"
          prop="first_check_opinion"
        />
        <el-table-column label="一级审核状态" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="row.first_check_status | statusFilter" size="mini">
              {{ row.first_check_status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="二级审核意见"
          align="center"
          prop="second_check_opinion"
        />
        <el-table-column label="二级审核状态" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="row.second_check_status | statusFilter" size="mini">
              {{ row.second_check_status }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="300px" align="center">
          <template slot-scope="{ row, $index }">
            <el-button
              type="primary"
              size="mini"
              plain
              icon="el-icon-edit"
              @click.native="showUpdateDialog(row)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              size="mini"
              plain
              icon="el-icon-delete"
              @click.native="handleDelete(row, $index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </el-card>

    <el-dialog
      title="查看论文详情"
      :visible.sync="detailDialogVisible"
      :close-on-press-escape="false"
      width="90%"
      :open="open()"
    >
      <el-card header="基本信息">
        <ele-form
          id="form1"
          ref="baseDataForm"
          v-model="formData"
          label-position="left"
          label-width="140"
          :is-show-submit-btn="false"
          :is-show-back-btn="false"
          :form-attrs="{ 'inline-message': true }"
          :form-desc="formDesc"
          :span="24"
          :disabled="true"
        />
      </el-card>

      <!-- <author ref="author" :is-edit="false" :data="authorData" /> -->

      <el-card header="附件信息" style="margin-top: 10px;">
        <el-form label-position="left" :span="24">
          <el-form-item label="附件信息" label-width="140px">
            <el-upload
              id="upload"
              action=""
              :auto-upload="false"
              list-type="picture-card"
              :file-list="fileList"
              :on-preview="handlePictureCardPreview"
              :disabled="true"
            />
          </el-form-item>
        </el-form>
        <el-image-viewer
          v-if="showViewer"
          :url-list="nowImages"
          :on-close="closeViewer"
          :initial-index="imgIndex"
          :z-index="9999"
        />
      </el-card>
    </el-dialog>
  </div>
</template>

<script src="./index.js"></script>

<style>
#upload .el-upload--picture-card {
  height: 0;
  width: 0;
  border: 0px;
}

.el-dialog .el-card__header {
  font-size: 20px;
  background-color: aliceblue;
}

.block {
  padding: 10px 0px;
}

#form1 form .el-row {
  background: rgb(231, 229, 229);
}

#form1 .el-form-item {
  margin-bottom: 0px;
}

.around-border {
  border-top: 1px solid rgb(168, 203, 234);
  border-left: 1px solid rgb(168, 203, 234);
  border-right: 1px solid rgb(168, 203, 234);
  padding-right: 0px !important;
}

.last-node {
  border-top: 1px solid rgb(168, 203, 234);
  border-left: 1px solid rgb(168, 203, 234);
  border-right: 1px solid rgb(168, 203, 234);
  border-bottom: 1px solid rgb(168, 203, 234);
  padding-right: 0px !important;
}

#form1 .el-form-item__content {
  border-left: 1px solid rgb(168, 203, 234);
  padding-left: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  background: white;
}
#form1 .el-form-item__label {
  padding-top: 5px;
}

.el-input.is-disabled .el-input__inner {
  color: black;
}
</style>
